<!doctype html>
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>Layui 栅格系统与后台框架布局</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes"> 
  <meta name="format-detection" content="telephone=no"> 
  <link rel="stylesheet" href="/layui/dist/css/layui.css" media="all"> 
  <link rel="stylesheet" href="/static/css/global.css" media="all"> 
 </head> 
 <body> 
  <div class="layui-header header header-doc"> 
   <div class="layui-container"> <a class="logo" href="/index.html"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div> 
    <div class="layui-hide-xs site-notice"></div> 
    <ul class="layui-nav" id="LAY_NAV_TOP"> 
     <li class="layui-nav-item layui-this"> <a href="/doc/index.html">文档</a> </li> 
     <li class="layui-nav-item "> <a href="/demo/index.html">示例</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;"> <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 周边 </a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a> 
        <hr> 
       </dd> 
       <dd lay-unselect>
        <a href="/alone.html" target="_blank" lay-unselect>独立组件</a>
       </dd> 
       <dd lay-unselect>
        <a href="/extend/" target="_blank">扩展组件</a>
       </dd> 
      </dl> </li> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a> </li> 
    </ul> 
   </div> 
  </div> <!-- 让IE8/9支持媒体查询，从而兼容栅格 --> <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> 
  <ul class="site-dir"> 
   <li><a href="#grid"><cite>栅格系统</cite></a></li> 
   <ul style="margin-left: 15px;"> 
    <li><a href="#grid-rule">栅格布局规则</a></li> 
    <li><a href="#grid-resp">响应式规则</a></li> 
    <li><a href="#grid-class">响应式公共类</a></li> 
    <li><a href="#grid-container">布局容器</a></li> 
    <li><a href="#grid-space">列间距 <span class="layui-badge-dot"></span></a></li> 
    <li><a href="#grid-offset">列偏移</a></li> 
    <li><a href="#grid-nesting">栅格嵌套</a></li> 
    <li><a href="#grid-iepatch">IE8/9兼容方案</a></li> 
   </ul> 
   <li><a href="#admin"><cite>管理界面布局</cite></a></li> 
  </ul> 
  <div class="layui-container layui-row"> 
   <div class="layui-col-md3"> 
    <div class="layui-panel site-menu"> 
     <ul class="layui-menu layui-menu-lg"> 
      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}"> 
       <div class="layui-menu-body-title">
         基础说明 
       </div> 
       <hr> 
       <ul> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/index.html"> <span>开始使用 </span> <span class="layui-font-12 layui-font-gray">Getting Started</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/base/infrastructure.html"> <span>底层方法 </span> <span class="layui-font-12 layui-font-gray">基础支撑</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/base/element.html"> <span>页面元素 </span> <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/base/modules.html"> <span>模块规范 </span> <span class="layui-font-12 layui-font-gray">使用 扩展</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/base/faq.html"> <span>常见问题 </span> <span class="layui-font-12 layui-font-gray">FAQ</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/base/changelog.html"> <span>更新日志 </span> <span class="layui-font-12 layui-font-gray">changelog</span> <span class="layui-badge-dot"></span> </a> 
         </div> </li> 
       </ul> </li> 
      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}"> 
       <div class="layui-menu-body-title">
         页面元素 
       </div> 
       <hr> 
       <ul> 
        <li class="layui-menu-item-checked2"> 
         <div class="layui-menu-body-title"> <a href="/doc/element/layout.html"> <span>布局 </span> <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/color.html"> <span>颜色 </span> <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/icon.html"> <span>图标 </span> <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/anim.html"> <span>动画 </span> <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/button.html"> <span>按钮 </span> <span class="layui-font-12 layui-font-gray">button</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/form.html"> <span>表单 </span> <span class="layui-font-12 layui-font-gray">form 元素集合</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/nav.html"> <span>导航 </span> <span class="layui-font-12 layui-font-gray">nav 面包屑</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/menu.html"> <span>菜单 </span> <span class="layui-font-12 layui-font-gray">menu 基础菜单</span> <span class="layui-badge-dot"></span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/tab.html"> <span>选项卡 </span> <span class="layui-font-12 layui-font-gray">Tabs 切换</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/progress.html"> <span>进度条 </span> <span class="layui-font-12 layui-font-gray">progress</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/panel.html"> <span>面板 </span> <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/table.html"> <span>表格 </span> <span class="layui-font-12 layui-font-gray">静态 table</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/badge.html"> <span>徽章 </span> <span class="layui-font-12 layui-font-gray">小圆点 小边框</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/timeline.html"> <span>时间线 </span> <span class="layui-font-12 layui-font-gray">timeline</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/element/auxiliar.html"> <span>辅助 </span> <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span> </a> 
         </div> </li> 
       </ul> </li> 
      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}"> 
       <div class="layui-menu-body-title">
         内置模块 
       </div> 
       <hr> 
       <ul> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/layer.html"> <span>弹出层 </span> <span class="layui-font-12 layui-font-gray">layer</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/laydate.html"> <span>日期与时间选择 </span> <span class="layui-font-12 layui-font-gray">laydate</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/laypage.html"> <span>分页 </span> <span class="layui-font-12 layui-font-gray">laypage</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/laytpl.html"> <span>模板引擎 </span> <span class="layui-font-12 layui-font-gray">laytpl</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/table.html"> <span>数据表格 </span> <span class="layui-font-12 layui-font-gray">table</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/form.html"> <span>表单 </span> <span class="layui-font-12 layui-font-gray">form</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/upload.html"> <span>文件上传 </span> <span class="layui-font-12 layui-font-gray">upload</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/dropdown.html"> <span>下拉菜单 </span> <span class="layui-font-12 layui-font-gray">dropdown</span> <span class="layui-badge-dot"></span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/transfer.html"> <span>穿梭框 </span> <span class="layui-font-12 layui-font-gray">transfer</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/tree.html"> <span>树形组件 </span> <span class="layui-font-12 layui-font-gray">tree</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/colorpicker.html"> <span>颜色选择器 </span> <span class="layui-font-12 layui-font-gray">colorpicker</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/element.html"> <span>常用元素操作 </span> <span class="layui-font-12 layui-font-gray">element</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/slider.html"> <span>滑块 </span> <span class="layui-font-12 layui-font-gray">slider</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/rate.html"> <span>评分 </span> <span class="layui-font-12 layui-font-gray">rate</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/carousel.html"> <span>轮播 </span> <span class="layui-font-12 layui-font-gray">carousel</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/flow.html"> <span>流加载 </span> <span class="layui-font-12 layui-font-gray">flow</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/util.html"> <span>工具组件 </span> <span class="layui-font-12 layui-font-gray">util</span> </a> 
         </div> </li> 
        <li class=""> 
         <div class="layui-menu-body-title"> <a href="/doc/modules/code.html"> <span>代码高亮显示 </span> <span class="layui-font-12 layui-font-gray">code</span> </a> 
         </div> </li> 
       </ul> </li> 
     </ul> 
    </div> 
    <div class="layui-hide-v">
      - 
    </div> 
   </div> 
   <div class="layui-col-md9 site-content"> 
    <h1 class="site-h1">栅格系统与后台布局</h1> 
    <blockquote class="layui-elem-quote">
      如你所愿，在 layui 2.0 的版本中，我们加入了强劲的栅格系统和常见的管理系统布局方案，这意味着你可以采用 layui 排版你的响应式网站和后台管理系统的界面了。layui 的栅格采用业界比较常见的 12 等分规则，内置手机、平板、PC 桌面中大型屏幕的多终端适配处理，最低能支持到 ie8。而你应当更欣喜的是，layui 终于开放了它经典的管理系统布局方案，快速搭建一个属于你的管理系统将变得十分轻松自如。 
    </blockquote> 
    <fieldset class="layui-elem-field layui-field-title site-title"> <legend><a name="grid">栅格系统</a></legend> 
    </fieldset> 
    <div class="site-text"> 
     <p>为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。</p> <a name="grid-rule"></a> 
     <p>一、栅格布局规则：</p> 
     <hr> 
     <table class="layui-table"> 
      <colgroup> 
       <col width="50"> 
       <col> 
      </colgroup> 
      <tbody> 
       <tr> 
        <td>1.</td> 
        <td>采用 <em>layui-row</em> 来定义行，如：<em>&lt;div class="layui-row"&gt;&lt;/div&gt;</em> </td> 
       </tr> 
       <tr> 
        <td>2.</td> 
        <td> 采用类似 <em>layui-col-md*</em> 这样的预设类来定义一组列（column），且放在行（row）内。其中： 
         <div class="layui-text"> 
          <ul> 
           <li>变量<em>md</em> 代表的是不同屏幕下的标记（可选值见下文）</li> 
           <li>变量<em>*</em> 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12</li> 
           <li>如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。</li> 
          </ul> 
         </div> </td> 
       </tr> 
       <tr> 
        <td>3.</td> 
        <td>列可以同时出现最多四种不同的组合，分别是：<em>xs</em>（超小屏幕，如手机）、<em>sm</em>（小屏幕，如平板）、<em>md</em>（桌面中等屏幕）、<em>lg</em>（桌面大型屏幕），以呈现更加动态灵活的布局。</td> 
       </tr> 
       <tr> 
        <td>4.</td> 
        <td>可对列追加类似 <em>layui-col-space5</em>、 <em>layui-col-md-offset3</em> 这样的预设类来定义列的间距和偏移。</td> 
       </tr> 
       <tr> 
        <td>5.</td> 
        <td>最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！</td> 
       </tr> 
      </tbody> 
     </table> 
     <p>示例（这里只是大致列举两个，更多实例请前往 <a href="/demo/grid.html" target="_blank">示例-栅格</a> 查看）</p> 
     <div class="layui-row"> 
      <div class="layui-col-md9"> 
       <div class="grid-demo">
        你的内容 9/12
       </div> 
      </div> 
      <div class="layui-col-md3"> 
       <div class="grid-demo grid-demo-bg1">
        你的内容 3/12
       </div> 
      </div> 
     </div> 
     <br> 
     <div class="layui-row"> 
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 
       <div class="grid-demo grid-demo-bg1">
        50% | 33.33% | 33.33%
       </div> 
      </div> 
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 
       <div class="grid-demo">
        50% | 66.67% | 33.33%
       </div> 
      </div> 
      <div class="layui-col-xs4 layui-col-sm12 layui-col-md4"> 
       <div class="grid-demo grid-demo-bg1">
        33.33% | 100% | 33.33%
       </div> 
      </div> 
      <div class="layui-col-xs4 layui-col-sm7 layui-col-md8"> 
       <div class="grid-demo grid-demo-bg2">
        33.33% | 50% | 66.67%
       </div> 
      </div> 
      <div class="layui-col-xs4 layui-col-sm5 layui-col-md4"> 
       <div class="grid-demo">
        33.33% | 50% | 33.33%
       </div> 
      </div> 
     </div> 
     <pre class="layui-code" lay-title="示例">&lt;div class="layui-container"&gt;  
  常规布局（以中型屏幕桌面为例）：
  &lt;div class="layui-row"&gt;
    &lt;div class="layui-col-md9"&gt;
      你的内容 9/12
    &lt;/div&gt;
    &lt;div class="layui-col-md3"&gt;
      你的内容 3/12
    &lt;/div&gt;
  &lt;/div&gt;
   
  移动设备、平板、桌面端的不同表现：
  &lt;div class="layui-row"&gt;
    &lt;div class="layui-col-xs6 layui-col-sm6 layui-col-md4"&gt;
      移动：6/12 | 平板：6/12 | 桌面：4/12
    &lt;/div&gt;
    &lt;div class="layui-col-xs6 layui-col-sm6 layui-col-md4"&gt;
      移动：6/12 | 平板：6/12 | 桌面：4/12
    &lt;/div&gt;
    &lt;div class="layui-col-xs4 layui-col-sm12 layui-col-md4"&gt;
      移动：4/12 | 平板：12/12 | 桌面：4/12
    &lt;/div&gt;
    &lt;div class="layui-col-xs4 layui-col-sm7 layui-col-md8"&gt;
      移动：4/12 | 平板：7/12 | 桌面：8/12
    &lt;/div&gt;
    &lt;div class="layui-col-xs4 layui-col-sm5 layui-col-md4"&gt;
      移动：4/12 | 平板：5/12 | 桌面：4/12
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
      </pre> <a name="grid-resp"></a> 
     <br> 
     <p>二、响应式规则：</p> 
     <hr> 
     <p>栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理</p> 
     <table class="layui-table"> 
      <colgroup> 
       <col width="160"> 
      </colgroup> 
      <thead> 
       <tr>
        <th></th> 
        <th>超小屏幕<br>(手机&lt;768px)</th> 
        <th>小屏幕<br>(平板≥768px)</th> 
        <th>中等屏幕<br>(桌面≥992px)</th> 
        <th>大型屏幕<br>(桌面≥1200px)</th> 
       </tr> 
      </thead>
      <tbody> 
       <tr> 
        <td><em>.layui-container</em>的值</td> 
        <td>auto</td> 
        <td>750px</td> 
        <td>970px</td> 
        <td>1170px</td> 
       </tr> 
       <tr> 
        <td>标记</td> 
        <td>xs</td> 
        <td>sm</td> 
        <td>md</td> 
        <td>lg</td> 
       </tr> 
       <tr> 
        <td>列对应类<br>* 为1-12的等分数值</td> 
        <td>layui-col-xs*</td> 
        <td>layui-col-sm*</td> 
        <td>layui-col-md*</td> 
        <td>layui-col-lg*</td> 
       </tr> 
       <tr> 
        <td>总列数</td> 
        <td colspan="4">12</td> 
       </tr> 
       <tr> 
        <td>响应行为</td> 
        <td>始终按设定的比例水平排列</td> 
        <td colspan="3">在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列</td> 
       </tr> 
      </tbody> 
     </table> <a name="grid-class"></a> 
     <br> 
     <p>三、响应式公共类：</p> 
     <hr> 
     <table class="layui-table"> 
      <colgroup> 
       <col width="150"> 
       <col> 
      </colgroup> 
      <thead> 
       <tr> 
        <th>类名（class）</th> 
        <th>说明</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>layui-show-*-block</td> 
        <td class="layui-text">定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg</td> 
       </tr> 
       <tr> 
        <td>layui-show-*-inline</td> 
        <td>定义不同设备下的 display: inline; * 可选值同上</td> 
       </tr> 
       <tr> 
        <td>layui-show-*-inline-block</td> 
        <td>定义不同设备下的 display: inline-block; * 可选值同上</td> 
       </tr> 
       <tr> 
        <td>layui-hide-*</td> 
        <td>定义不同设备下的隐藏类，即： display: none; * 可选值同上</td> 
       </tr> 
      </tbody> 
     </table> <a name="grid-container"></a> 
     <br> 
     <p>四、布局容器：</p> 
     <hr> 
     <p>将栅格放入一个带有 <em>class="layui-container"</em> 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。</p> 
     <pre class="layui-code">&lt;div class="layui-container"&gt;
  &lt;div class="layui-row"&gt;
    ……
  &lt;/div&gt;
&lt;/div&gt;      
      </pre> 
     <p>当然，你还可以不固定容器宽度。将栅格或其它元素放入一个带有 <em>class="layui-fluid"</em> 的容器中，那么宽度将不会固定，而是 100% 适应</p> 
     <pre class="layui-code">&lt;div class="layui-fluid"&gt;
  ……
&lt;/div&gt;      
      </pre> <a name="grid-space"></a> 
     <br> 
     <p>五、列间距：</p> 
     <hr> 
     <table class="layui-table"> 
      <colgroup> 
       <col width="200"> 
       <col> 
      </colgroup> 
      <tbody> 
       <tr> 
        <td colspan="2">通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：</td> 
       </tr> 
       <tr> 
        <td> layui-col-space1 <br>layui-col-space2 <br>layui-col-space4 <br>layui-col-space5 <br>layui-col-space6 <br>layui-col-space8 <br>layui-col-space10 <br>layui-col-space12 <br>layui-col-space14 <br>layui-col-space15 <br>layui-col-space16 <br>layui-col-space18 <br>layui-col-space20 <br>layui-col-space22 <br>layui-col-space24 <br>layui-col-space25 <br>layui-col-space26 <br>layui-col-space28 <br>layui-col-space30 </td> 
        <td>支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔</td> 
       </tr> 
      </tbody> 
     </table> 
     <p>下面是一个简单的例子，列间距为10px：</p> 
     <div class="layui-row layui-col-space10"> 
      <div class="layui-col-md4"> 
       <div class="grid-demo grid-demo-bg1">
        1/3
       </div> 
      </div> 
      <div class="layui-col-md4"> 
       <div class="grid-demo">
        1/3
       </div> 
      </div> 
      <div class="layui-col-md4"> 
       <div class="grid-demo grid-demo-bg1">
        1/3
       </div> 
      </div> 
     </div> 
     <pre class="layui-code">&lt;div class="layui-row layui-col-space10"&gt;
  &lt;div class="layui-col-md4"&gt;
    1/3
  &lt;/div&gt;
  &lt;div class="layui-col-md4"&gt;
    1/3
  &lt;/div&gt;
  &lt;div class="layui-col-md4"&gt;
    1/3
  &lt;/div&gt;
&lt;/div&gt;
      </pre> 
     <p>如果需要的间距高于30px（一般不常见），请采用偏移，下文继续讲解</p> <a name="grid-offset"></a> 
     <br> 
     <p>六、列偏移：</p> 
     <hr> 
     <p> 对列追加 类似 <em>layui-col-md-offset*</em> 的预设类，从而让列向右偏移。其中 <em>*</em> 号代表的是偏移占据的列数，可选中为 1 - 12。 <br>如：<em>layui-col-md-offset3</em>，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度 </p> 
     <p>下面是一个采用「列偏移」机制让两个列左右对齐的实例</p> 
     <div class="layui-row"> 
      <div class="layui-col-md4"> 
       <div class="grid-demo grid-demo-bg1">
        4/12
       </div> 
      </div> 
      <div class="layui-col-md4 layui-col-md-offset4"> 
       <div class="grid-demo">
        偏移4列，从而在最右
       </div> 
      </div> 
     </div> 
     <pre class="layui-code">&lt;div class="layui-row"&gt;
  &lt;div class="layui-col-md4"&gt;
    4/12
  &lt;/div&gt;
  &lt;div class="layui-col-md4 layui-col-md-offset4"&gt;
    偏移4列，从而在最右
  &lt;/div&gt;
&lt;/div&gt;
      </pre> 
     <p>请注意，列偏移可针对不同屏幕的标准进行设定，比如上述的例子，只会在桌面屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。</p> <a name="grid-nesting"></a> 
     <br> 
     <p>七、栅格嵌套：</p> 
     <hr> 
     <p>理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（<em>layui-col-md*</em>）中插入一个行元素（<em>layui-row</em>），即可完成嵌套。下面是一个简单的例子：</p> 
     <div class="layui-row layui-col-space5"> 
      <div class="layui-col-md5"> 
       <div class="layui-row grid-demo"> 
        <div class="layui-col-md3"> 
         <div class="grid-demo grid-demo-bg1">
          内部列
         </div> 
        </div> 
        <div class="layui-col-md9"> 
         <div class="grid-demo grid-demo-bg2">
          内部列
         </div> 
        </div> 
        <div class="layui-col-md12"> 
         <div class="grid-demo grid-demo-bg3">
          内部列
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="layui-col-md7"> 
       <div class="layui-row grid-demo grid-demo-bg1"> 
        <div class="layui-col-md12"> 
         <div class="grid-demo">
          内部列
         </div> 
        </div> 
        <div class="layui-col-md9"> 
         <div class="grid-demo grid-demo-bg2">
          内部列
         </div> 
        </div> 
        <div class="layui-col-md3"> 
         <div class="grid-demo grid-demo-bg3">
          内部列
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <pre class="layui-code">&lt;div class="layui-row layui-col-space5"&gt;
  &lt;div class="layui-col-md5"&gt;
    &lt;div class="layui-row grid-demo"&gt;
      &lt;div class="layui-col-md3"&gt;
        内部列
      &lt;/div&gt;
      &lt;div class="layui-col-md9"&gt;
        内部列
      &lt;/div&gt;
      &lt;div class="layui-col-md12"&gt;
        内部列
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="layui-col-md7"&gt;
    &lt;div class="layui-row grid-demo grid-demo-bg1"&gt;
      &lt;div class="layui-col-md12"&gt;
        内部列
      &lt;/div&gt;
      &lt;div class="layui-col-md9"&gt;
        内部列
      &lt;/div&gt;
      &lt;div class="layui-col-md3"&gt;
        内部列
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
      </pre> <a name="grid-iepatch"></a> 
     <br> 
     <p>八、让IE8/9兼容栅格：</p> 
     <hr> 
     <p>事实上IE8和IE9并不支持媒体查询（Media Queries），但你可以使用下面的补丁完美兼容！该补丁来自于开源社区：</p> 
     <pre class="layui-code">&lt;!-- 让IE8/9支持媒体查询，从而兼容栅格 --&gt;
&lt;!--[if lt IE 9]&gt;
  &lt;script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;
      </pre> 
     <p>将上述代码放入你页面 <em>&lt;body&gt;</em> 标签内的任意位置</p> 
    </div> 
    <fieldset class="layui-elem-field layui-field-title site-title"> <legend><a name="admin">管理系统界面布局</a></legend> 
    </fieldset> 
    <div class="site-text"> 
     <p>layui 之所以赢得如此多人的青睐，更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码，你可以前往示例页面：<a href="/demo/layout-admin.html" target="_blank">预览布局效果</a></p> 
     <pre class="layui-code" lay-height="330px" lay-lang="HTML">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  &lt;title&gt;layout 管理系统大布局 - Layui&lt;/title&gt;
  &lt;link rel="stylesheet" href="./layui/css/layui.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="layui-layout layui-layout-admin"&gt;
  &lt;div class="layui-header"&gt;
    &lt;div class="layui-logo layui-hide-xs layui-bg-black"&gt;layout demo&lt;/div&gt;
    &lt;!-- 头部区域（可配合layui 已有的水平导航） --&gt;
    &lt;ul class="layui-nav layui-layout-left"&gt;
      &lt;!-- 移动端显示 --&gt;
      &lt;li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"&gt;
        &lt;i class="layui-icon layui-icon-spread-left"&gt;&lt;/i&gt;
      &lt;/li&gt;
      
      &lt;li class="layui-nav-item layui-hide-xs"&gt;&lt;a href=""&gt;nav 1&lt;/a&gt;&lt;/li&gt;
      &lt;li class="layui-nav-item layui-hide-xs"&gt;&lt;a href=""&gt;nav 2&lt;/a&gt;&lt;/li&gt;
      &lt;li class="layui-nav-item layui-hide-xs"&gt;&lt;a href=""&gt;nav 3&lt;/a&gt;&lt;/li&gt;
      &lt;li class="layui-nav-item"&gt;
        &lt;a href="javascript:;"&gt;nav groups&lt;/a&gt;
        &lt;dl class="layui-nav-child"&gt;
          &lt;dd&gt;&lt;a href=""&gt;menu 11&lt;/a&gt;&lt;/dd&gt;
          &lt;dd&gt;&lt;a href=""&gt;menu 22&lt;/a&gt;&lt;/dd&gt;
          &lt;dd&gt;&lt;a href=""&gt;menu 33&lt;/a&gt;&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="layui-nav layui-layout-right"&gt;
      &lt;li class="layui-nav-item layui-hide layui-show-md-inline-block"&gt;
        &lt;a href="javascript:;"&gt;
          &lt;img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img"&gt;
          tester
        &lt;/a&gt;
        &lt;dl class="layui-nav-child"&gt;
          &lt;dd&gt;&lt;a href=""&gt;Your Profile&lt;/a&gt;&lt;/dd&gt;
          &lt;dd&gt;&lt;a href=""&gt;Settings&lt;/a&gt;&lt;/dd&gt;
          &lt;dd&gt;&lt;a href=""&gt;Sign out&lt;/a&gt;&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/li&gt;
      &lt;li class="layui-nav-item" lay-header-event="menuRight" lay-unselect&gt;
        &lt;a href="javascript:;"&gt;
          &lt;i class="layui-icon layui-icon-more-vertical"&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="layui-side layui-bg-black"&gt;
    &lt;div class="layui-side-scroll"&gt;
      &lt;!-- 左侧导航区域（可配合layui已有的垂直导航） --&gt;
      &lt;ul class="layui-nav layui-nav-tree" lay-filter="test"&gt;
        &lt;li class="layui-nav-item layui-nav-itemed"&gt;
          &lt;a class="" href="javascript:;"&gt;menu group 1&lt;/a&gt;
          &lt;dl class="layui-nav-child"&gt;
            &lt;dd&gt;&lt;a href="javascript:;"&gt;menu 1&lt;/a&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;a href="javascript:;"&gt;menu 2&lt;/a&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;a href="javascript:;"&gt;menu 3&lt;/a&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;a href=""&gt;the links&lt;/a&gt;&lt;/dd&gt;
          &lt;/dl&gt;
        &lt;/li&gt;
        &lt;li class="layui-nav-item"&gt;
          &lt;a href="javascript:;"&gt;menu group 2&lt;/a&gt;
          &lt;dl class="layui-nav-child"&gt;
            &lt;dd&gt;&lt;a href="javascript:;"&gt;list 1&lt;/a&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;a href="javascript:;"&gt;list 2&lt;/a&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;a href=""&gt;超链接&lt;/a&gt;&lt;/dd&gt;
          &lt;/dl&gt;
        &lt;/li&gt;
        &lt;li class="layui-nav-item"&gt;&lt;a href="javascript:;"&gt;click menu item&lt;/a&gt;&lt;/li&gt;
        &lt;li class="layui-nav-item"&gt;&lt;a href=""&gt;the links&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="layui-body"&gt;
    &lt;!-- 内容主体区域 --&gt;
    &lt;div style="padding: 15px;"&gt;内容主体区域。记得修改 layui.css 和 js 的路径&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="layui-footer"&gt;
    &lt;!-- 底部固定区域 --&gt;
    底部固定区域
  &lt;/div&gt;
&lt;/div&gt;
&lt;script src="./layui/layui.js"&gt;&lt;/script&gt;
&lt;script&gt;
//JS 
layui.use(['element', 'layer', 'util'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  
  //头部事件
  util.event('lay-header-event', {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg('展开左侧菜单的操作', {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,content: '&lt;div style="padding: 15px;"&gt;处理右侧面板的操作&lt;/div&gt;'
        ,area: ['260px', '100%']
        ,offset: 'rt' //右上角
        ,anim: 5
        ,shadeClose: true
      });
    }
  });
  
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
      </pre> 
     <p></p> 
    </div> 
    <fieldset class="layui-elem-field layui-field-title site-title"> <legend><a name="docend">结语</a></legend> 
    </fieldset> 
    <div class="site-text"> 
     <p></p> 
    </div> 
    <div class="layui-elem-quote"> 
     <p>layui - 在每一个细节中，用心与你沟通</p> 
    </div> 
   </div> 
  </div> 
  <div class="layui-footer footer footer-doc"> 
   <p> Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p> 
   <p> </p>
  </div> 
  <script>
window.global = {
  pageType: 'doc'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
</script> 
  <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> 
  </div> 
  <div class="site-mobile-shade"></div> 
  <script src="/layui/dist/layui.js" charset="utf-8"></script> 
  <script>
layui.config({
  base: '/static/lay/modules/layui/'
  ,version: '1632659138211'
}).use('global');
</script>  
 </body>
<script src="/common/common.js"></script>
</html>